---
title: Barre d'outils de développement
description: Guide d'utilisation de la barre d'outils de développement dans Astro
i18nReady: true
---
import RecipeLinks from "~/components/RecipeLinks.astro";

Pendant que le serveur de développement fonctionne, Astro inclut une barre d'outils de développement au bas de chaque page dans l'aperçu de votre navigateur local.

Cette barre d'outils comprend un certain nombre d'outils utiles pour le débogage et l'inspection de votre site pendant le développement et peut-être [amélioré avec d'autres applications de la barre d'outils de développement](#améliorer-la-barre-doutils-de-développement) trouvée dans le répertoire des intégrations. Vous pouvez même [créer vos propres applications pour la barre d'outil](/fr/recipes/making-toolbar-apps/) en utilisant l'[API de la barre d'outils de développement](/fr/reference/dev-toolbar-app-reference/) !

Cette barre d'outils est activée par défaut et apparaît lorsque vous survolez le bas de la page. Il s'agit d'un outil de développement uniquement, qui n'apparaîtra pas sur votre site publié.

## Applications intégrées

### Astro Menu

L'application Astro Menu permet d'accéder facilement à diverses informations sur le projet en cours et à des liens vers des ressources supplémentaires. Elle permet notamment d'accéder en un clic à la documentation, au dépôt GitHub et au serveur Discord d'Astro.

Cette application comprend également un bouton « Copy debug info » qui lancera la commande [`astro info`](/fr/reference/cli-reference/#astro-info) et copiera la sortie dans votre presse-papiers. Cela peut être utile pour demander de l'aide ou signaler des problèmes.

### Inspect

L'application Inspect fournit des informations sur tous les [îlots](/fr/concepts/islands/) de la page en cours. Elle vous montrera les propriétés transmises à chaque îlot, ainsi que la directive client utilisée pour les afficher.

### Audit

L'application Audit execute automatiquement une série d'audits sur la page en cours, en recherchant les problèmes de performance et d'accessibilité les plus courants. Lorsqu'un problème est détecté, un point rouge apparaît dans la barre d'outils. En cliquant sur l'application, une liste des résultats de l'audit s'affiche et les éléments concernés sont mis en évidence directement dans la page.

:::note
Les vérifications de base des performances et de l'accessibilité effectuées par la barre d'outils de développement ne remplacent pas des outils spécialisés tels que [Pa11y](https://pa11y.org/) ou [Lighthouse](https://developers.google.com/web/tools/lighthouse), ou mieux encore, des êtres humains !

La barre d'outils de développement vise à fournir un moyen rapide et facile de détecter les problèmes courants pendant le développement, sans avoir besoin de basculer vers un autre outil.
:::

### Settings

L'application Settings vous permet de configurer les options de la barre d'outils de développement, telles que la journalisation verbeuse, la désactivation des notifications et l'ajustement de son emplacement sur l'écran.

## Améliorer la barre d'outils de développement

Les intégrations Astro peuvent ajouter de nouvelles applications à la barre d'outils de développement, vous permettant de l'étendre avec des outils personnalisés qui sont spécifiques à votre projet. Vous pouvez trouver [plus d'applications de développement à installer dans le répertoire des intégrations](https://astro.build/integrations/?search=&categories%5B%5D=toolbar) ou en utilisant le [Menu Astro](#astro-menu).

Installez les intégrations supplémentaires de la barre d'outils de développement dans votre projet comme n'importe quelle autre [intégration Astro](/fr/guides/integrations-guide/) en suivant ses propres instructions d'installation.

<RecipeLinks slugs={["fr/recipes/making-toolbar-apps"]} />

## Désactivation de la barre d'outils dev

La barre d'outils de développement est activée par défaut pour chaque site. Vous pouvez choisir de la désactiver pour des projets et/ou des utilisateurs individuels si nécessaire.

### Par projet

Pour désactiver la barre d'outils de développement pour tous ceux qui travaillent sur un projet, définissez `devToolbar: false` dans le [fichier de configuration d'Astro](/fr/reference/configuration-reference/#devtoolbarenabled).

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
});
```

Pour réactiver la barre d'outils de développement, supprimez ces lignes de votre configuration, ou mettez `enabled: true`.

### Par utilisateur

Pour désactiver la barre d'outils de développement pour vous-même sur un projet spécifique, lancez la commande [`astro preferences`](/fr/reference/cli-reference/#astro-preferences).

```shell
astro preferences disable devToolbar
```

Pour désactiver la barre d'outils de développement dans tous les projets Astro pour un utilisateur sur la machine courante, ajoutez l'option `--global` lors de l'exécution de `astro-preferences` :

```shell
astro preferences disable --global devToolbar
```

La barre d'outils de développement peut ensuite être activée avec :

```shell
astro preferences enable devToolbar
```
